
import React, { useState, useEffect, useRef,useLayoutEffect } from 'react'; // 这行必须写，不然报错，可能是eslint搞事情。
import {
  Row,
  Input,
  Form,
  DatePicker,
  Modal,
  message,
  TreeSelect,
  Radio,
  Select,
  InputNumber
} from 'antd';
const { confirm } = Modal;
const { RangePicker } = DatePicker;
const { TreeNode } = TreeSelect;
const { Option } = Select;
const { TextArea } = Input;
import {listMenu,deeps2,getMenu,updateMenu} from '@/api/system/menu.js'
import {handleTree} from '@/utils/ruoyi.js'
const EditMenu = ({
  visible,
  onCancel,
  oninitList,
  menuId,
  record
}) => {
  const [form] = Form.useForm();

  useResetFormOnCloseModal({
    form,
    visible,
  });
  const [treeData, settreeData] = useState([])
  //点击添加用户
  const onOk = () => {
    form.submit();
  }
  useLayoutEffect(() => {
    getTreeselect()
  },[menuId]);

  //
  useEffect(() => {
    form.setFieldsValue(record)
  }, [visible])


    /** 查询菜单下拉树结构 */
  const  getTreeselect=()=>{
    listMenu().then(response => {
      settreeData(deeps2(handleTree(response.data)))
    });
  }
  /** 精确菜单查找 */
  const getMenuFn=()=>{
    getMenu(menuId).then(res=>{
      if(res.code==200){
        setEditvalue(res.data)
      }
    })
  }


  //表单提交方法
  const onFinish = values => {
    values.menuId=menuId
    updateMenu(values).then(res => {
      if (res.code == 200) {
        console.log(res);
        message.success('修改成功');
        onCancel();
        oninitList();
      } else if (res.code == 500) {
        message.warning(res.msg);
      }
    });
  };
  const layout = {
    labelCol: { span: 6 },
    wrapperCol: { span: 16 },
  };

  return (
    <Modal
      title="修改菜单"
      visible={visible}
      onOk={onOk}
      onCancel={onCancel}
      cancelText="取消"
      okText="确定"
      destroyOnClose={true}
    >

      {record!==null&&
      <Form
        form={form}
        {...layout}
        labelAlign="right"
        layout="horizontal"
        onFinish={onFinish}
        initialValues={record}
      >
              <Form.Item
             label="上级菜单"
        >
            {treeData.length && (
              <TreeSelect
                treeData={treeData}
              ></TreeSelect>
            )}
        </Form.Item>

        <Form.Item label="菜单类型"
          name="menuType"
          rules={[{ required: true, message: '菜单类型不能为空' }]}
        >
          <Radio.Group>
          <Radio value={'M'}>目录</Radio>
          <Radio value={'C'}>菜单</Radio>
          <Radio value={'B'}>按钮</Radio>
          </Radio.Group>
        </Form.Item>

        <Form.Item label="菜单名称"
          name="menuName"
          rules={[{ required: true, message: '菜单名称不能为空' }]}
        >
              <Input placeholder="请输入菜单名称"></Input>
        </Form.Item>
        <Form.Item label="显示排序"
        name="orderNum"
            rules={[{ required: true, message: '显示排序不能为空' }]}
        >
              <InputNumber ></InputNumber>
        </Form.Item>
        <Form.Item label="是否外链"  name="isFrame"
        >
          <Radio.Group>
          <Radio value={'0'}>是</Radio>
          <Radio value={'1'}>否</Radio>
          </Radio.Group>
        </Form.Item>
        <Form.Item label="路由地址"
        name="path"
             rules={[{ required: true, message: '路由地址不能为空' }]}
        >
              <Input placeholder="请输入路由地址"></Input>
        </Form.Item>
        <Form.Item label="显示状态"  name="visible"
        >
          <Radio.Group>
          <Radio value={'0'}>显示</Radio>
          <Radio value={'1'}>隐藏</Radio>
          </Radio.Group>
        </Form.Item>
        <Form.Item label="菜单状态" name="status"
        >
          <Radio.Group>
          <Radio value={'0'}>正常</Radio>
          <Radio value={'1'}>停用</Radio>
          </Radio.Group>
        </Form.Item>
      </Form>
      }
    </Modal>
  );
};


const useResetFormOnCloseModal = ({ form, visible }) => {
  const prevVisibleRef = useRef();
  useEffect(() => {
    prevVisibleRef.current = visible;
  }, [visible]);
  const prevVisible = prevVisibleRef.current;
  useEffect(() => {
    if (!visible && prevVisible) {
      form.resetFields();
    }
  }, [visible]);
};

export default EditMenu;
